<template>
    <div class="city">
      <ul class="list">
        <li
          v-for="item in letters"
          :key="item"
          :ref="item"
          @click='cityClick'
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          {{item}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        props:{
          Aside:Object
        },
      data(){
          return{
            //开关
            touchStatus:false,
            startY:0,
            timer:null
          }
      },
      updated(){//当页面数据发生改变
        this.startY=this.$refs['A'][0].offsetTop
      },
      computed:{
        //将aside对象转为数组
        letters(){
          const letters=[]
          for (let i in this.Aside){
            letters.push(i)
          }
          return letters
        }

      },
      methods:{
          cityClick(e){
          this.$emit('change',e.target.innerText)
          },
        handleTouchStart(){//手指按下
          this.touchStatus=true
          //console.log('手指按下')
        },
        handleTouchMove(e){//手指移动  实现城市切换

            if (this.timer){
              clearTimeout(this.timer)
            }

           this.timer=setTimeout(()=>{//函数截留
              if ( this.touchStatus){
                //const startY=this.$refs['B'][0].offsetTop
                const  touchY=e.touches[0].clientY-62//获得当前触发点到最上div的距离
                const index=Math.floor((touchY-this.startY)/20)//计算当前触发点的下标
                if (index>= 0 && index<this.letters.length){
                  this.$emit('change',this.letters[index])
                }
              }
            },100)

         // console.log(startY)
        },
        handleTouchEnd(){//手指抬起
          this.touchStatus=false
          //console.log('手指抬起')
        }


      }
    }
</script>

<style lang="stylus" scoped>
  .list{
    width .2rem;
    position absolute;
    top :.76rem;
    right 0;
    bottom 0;
    display flex;
    flex-direction column;
    justify-content center;
    li{
      text-align center;
      line-height .2rem;
      color #00bcd4;
    }
  }
</style>
